<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="login-container">
    <h2>用户登录</h2>
    <form id="login-form">
        <div class="form-group">
            <label for="username">账号</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
        </div>

        <div class="form-group">
            <label for="role">身份</label>
            <select id="role" name="role">
                <option value="3">管理员</option>
                <option value="2">业主</option>
                <option value="1">员工</option>
            </select>
        </div>

        <!--<div class="form-group">
            <label for="captcha">验证码</label>
            <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" required>
            <img id="captcha-image" src="/captchaImage" alt="验证码">
            <button type="button" id="refresh-captcha">刷新验证码</button>
        </div>-->

        <button type="submit" id="login-btn">登录</button>

        <div id="error-message" style="color: red; display: none;">登录失败，信息有误！</div>
    </form>
</div>

<script>
    $(document).ready(function() {
        // 刷新验证码
        // $('#refresh-captcha').click(function() {
        //     $('#captcha-image').attr('src', '/captchaImage?' + new Date().getTime());
        // });

        // 提交表单
        $('#login-form').submit(function(event) {
            event.preventDefault();

            // 获取表单数据
            var username = $('#username').val();
            var password = $('#password').val();
            var role = $('#role').val();
           // var captcha = $('#captcha').val();

            // 验证验证码
            // if (captcha.trim() === "") {
            //     alert("请输入验证码！");
            //     return;
            // }

            // 准备发送的数据
            var loginData = {
                username: username,
                password: password,
                role: role
               // captcha: captcha
            };

            // AJAX提交登录数据
            $.ajax({
                url: 'user/login',  // 后端登录接口
                method: 'POST',
                contentType: 'application/json',  // 设置请求内容类型为 JSON
                data: JSON.stringify(loginData),  // 将数据转为JSON格式发送
                success: function(response) {
                    if (response.code == 2000) {
                        // 登录成功
                        window.location.href = '/index.html';  // 重定向到仪表盘页面
                    } else {
                        // 登录失败
                        $('#error-message').text(response.msg).show();
                    }
                },
                error: function() {
                    $('#error-message').text("请求失败，请稍后再试。").show();
                }
            });
        });
    });

</script>
</body>
</html>
